<!--
 * @Author: 马潭龙
 * @Date: 2022-01-13 17:18:05
 * @LastEditTime: 2022-01-13 17:25:28
 * @LastEditors: 马潭龙
 * @Description: 报工管理-统计按钮弹窗
 * @FilePath: \devlomp\icm-vue-master\src\views\hifar\pm\modules\HfPmStatModal.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <j-modal
    ref="modal"
    :title="title"
    :width="1250"
    :visible="visible"
    :maskClosable="false"
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    id="echarts"
  >
    <div id="bar" ref="bar" style="width:100%;height:500px"></div>
    </j-modal>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      width: 800,
      visible: false,
      disableSubmit: false,
      dataSource:{},
      myChart:null
    }
  },
  components:{
  },
  methods: {
      show(dataSource){
          this.visible=!this.visible
        this.dataSource = Object.assign({}, dataSource)
        this.$nextTick(()=>{
          this.draw()
        })
      },
      close () {
        this.$emit('close');
        this.dataSource=[]
        this.visible = false
      },
      handleOk () {
        this.$emit('ok');
        this.dataSource=[]
        this.visible=!this.visible
      },
      submitCallback(){
        this.$emit('ok');
        this.dataSource=[]
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
    draw() {
      if (this.myChart != null && this.myChart!= "" && this.myChart!= undefined) {
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(document.getElementById('bar'))
        if(this.dataSource.length==0){
          this.$message.error('当前日期暂无数据，请重新选择')
        }else {
          let xDataArr=[]
          let yDataArr=[]
          if(Object.keys(this.dataSource).length>0){
            Object.keys(this.dataSource).forEach((key)=>{
              xDataArr.push(this.dataSource[key].type)
              yDataArr.push(this.dataSource[key].jeecg)
            })
          }
          // 指定图表的配置项和数据
          var option = {
            title: {
              // text: '报工统计',
              textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontSize: 14,
                fontStyle: 'normal',
                fontWeight: 'bold',
              },
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['实际人天']
            },
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {},
                // dataView: {},
                // dataZoom: {},
                magicType: {
                  show: true,
                  type: ['line', 'bar']
                },
              }
            },
            calculable: true,
            xAxis: [{
              type: 'category',
              data: xDataArr,
              axisLabel: {
                // formatter: function (value) {
                //   return value.split("").join("\n")
                // }
                interval:0,
                rotate:-45
              }
            }],
            yAxis: [{
              type: 'value',
            }],
            series: [{
              name: '实际人天',
              type: 'bar',
              data: yDataArr,
              label: {
                show: true, // 开启显示
                // rotate: -45, // 旋转70度
                position: 'top', // 在上方显示
                distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                verticalAlign: 'middle',
                textStyle: { // 数值样式
                  color: 'blue',
                  fontSize: 12
                }
              },
              markPoint: {
                data: [
                  {
                    type: 'max', name: '最大值'
                  },
                  {
                    type: 'min', name: '最小值'
                  }
                ]
              },
              // markLine: {
              //   data: [
              //     {
              //       type: 'average', name: '平均值'
              //     }
              //   ]
              // },
            }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          this.myChart.setOption(option,true);
          window.onresize = function(){
            this.myChart.resize()
          }
          window.onresize = this.myChart.resize
        }
    },
  },
}
</script>

<style lang="less" scoped>
  #echarts{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  #bar{
    display: inline-block;
    /*box-shadow: 1px 1px 10px #888888;*/
    /*border-radius: 30px;*/
  }
</style>